import React from 'react'
import AppBar from '../../components/AppBar';
import { availableOrders, takeOrder, allOrders, receiveOrder, deliverOrder, arriveOrder } from '../../api/deliverer'

export class OrderPlaza extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            orders: []
        }
        this.handleTakeOrder = this.handleTakeOrder.bind(this)
    }

    componentDidMount() {
        availableOrders((data) => {
            this.setState({
                orders: data
            })
        })
    }

    handleTakeOrder(id) {
        takeOrder(id)
    }

    render() {
        let orderCards = this.state.orders.map(order => {
            return (
                <OrderCard order={order} takeOrder={this.handleTakeOrder} key={"ordercard-" + order.id} show={false} />
            )
        })
        return (
            <>
                <AppBar />
                <div className="container" style={{ padding: '15px 0' }}>
                    <ul className="list-group">
                        {orderCards}
                    </ul>
                </div>
            </>
        )
    }
}

const OrderCard = (props) => {
    let receiver = JSON.parse(props.order.receiverInfo)
    let btn;

    if (props.show != true) {
        receiver.rname = '***'
        receiver.rphone = '***'
        btn =
            <button className="btn btn-success" style={{ minWidth: '100px' }} onClick={() => { props.takeOrder(props.order.id) }}>接单</button>
    } else {
        btn = props.btn
    }

    let shopLocUrl = 'https://m.amap.com/navi/?dest=' + props.order.locationLongitude + ',' + props.order.locationLatitude
        + '&destName=' + props.order.name + '&hideRouteIcon=0&key=ceda2bce39081ea385b2c5d35484c5b0'

    return (
        <div className="card">
            <div className="card-body">
                <div><strong>{props.order.name}</strong></div>
                <div style={{ display: 'flex' }}>
                    <small style={{ paddingRight: '20px' }}>商家地址</small>
                    <strong style={{ flex: '1' }}>{props.order.displayLocation}</strong>
                    <a href={shopLocUrl}>查看地图</a>
                </div>
                <hr></hr>
                <div style={{ display: 'flex' }}>
                    <small style={{ paddingRight: '20px' }}>收货人姓名</small>
                    <strong>{receiver.rname}</strong>
                </div>
                <div style={{ display: 'flex' }}>
                    <small style={{ paddingRight: '20px' }}>收货地址</small>
                    <strong>{receiver.location}</strong>
                </div>
                <div style={{ display: 'flex' }}>
                    <small style={{ paddingRight: '20px' }}>收货人电话</small>
                    <strong>{receiver.rphone}</strong>
                </div>
                <div style={{ textAlign: 'right' }}>{btn}</div>
            </div>

        </div>
    )
}

export class TakenOrders extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            orders: []
        }
    }

    componentDidMount() {
        allOrders((data) => {
            console.log(data);

            this.setState({
                orders: data
            })
        })
    }

    render() {
        let orderCards = this.state.orders.map(order => {
            let btn;
            if (order.cancelTime != 0) {
                return ''
            } else {
                if (order.delivererArriveTime == 0) {
                    btn =
                        <button className="btn btn-info" style={{ minWidth: '100px' }}
                            onClick={() => { arriveOrder(order.id) }}>
                            已到达商家
                        </button>
                } else if (order.deliverTime == 0) {
                    btn =
                        <button className="btn btn-warning" style={{ minWidth: '100px' }}
                            onClick={() => { deliverOrder(order.id) }}>
                            已取到货
                        </button>
                } else if (order.receiveTime == 0) {
                    btn =
                        <button className="btn btn-danger" style={{ minWidth: '100px' }}
                            onClick={() => { receiveOrder(order.id) }}>
                            点我送达
                        </button>
                } else {
                    btn =
                        <button className="btn btn-secondary" style={{ minWidth: '100px' }}>
                            无可用操作
                        </button>
                }
            }
            return (
                <OrderCard
                    order={{
                        id: order.id,
                        name: order.shopName,
                        displayLocation: order.shopLocation,
                        receiverInfo: order.receiverInfo,
                        locationLatitude: order.shopLatitude,
                        locationLongitude: order.shopLongitude
                    }}
                    key={"ordercard-" + order.id}
                    show={true}
                    btn={btn}
                />
            )
        })
        return (
            <>
                <AppBar />
                <div className="container" style={{ padding: '15px 0' }}>
                    <ul className="list-group">
                        {orderCards}
                    </ul>
                </div>
            </>
        )
    }
}